{% extends "base.html" %}

{% block meta %}
    <meta name="menu-tag" content="21"/>
{% end block %}

{% block main %}
<div class="container">
    <h3>当前实验课程：</h3>
    <hr/>
    <div id="courselist" class="container" data-bind="foreach:$data">
        <div class="col-md-3">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <b data-bind="text:coursename"></b>
                </div>
                <div class="panel-body">
                    <p data-bind="text:classname"></p>                        
                    <p>
                        <span data-bind="text:startdate"></span>
                        ~
                        <span data-bind="text:enddate"></span>
                    </p>
                </div>
                <div class="panel-footer" style="text-align: right">
                    <a class="btn btn-primary btn-sm" data-bind="attr:{href: '/courses?courseid=' + courseid}">
                        <i class="fa fa-arrow-circle-right">进入课程</i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

{% end block %}


{% block script %}
<script type="text/javascript">
    function Course(courseid, coursename, classname, startdate, enddate){
        var self = this;
        self.courseid = courseid ? courseid : 0;
        self.coursename = coursename;
        self.classname = classname;
        self.startdate = startdate;
        self.enddate = enddate;
    }

    $(document).ready(function(){
        $.getJSON("/lab?operation=get_active_courses", function(jsonResult){
            var courses = [];
            for(var i=0;i<jsonResult.data.length;i++){
                var item = jsonResult.data[i];
                course = new Course(item.courseid, item.coursename, item.classname, item.startdate, item.enddate);
                courses.push(course);
            }
            ko.applyBindings(courses, document.getElementById('courselist'));
        });
    });
</script>
{% end block %}
